﻿@model G28BS.Models.GameRoom

<div id="ffGameBoard">
    <p class="fambiForRound" data-bind="visible: (gameRoomState() == 'Active') && (round().fambi == slotNumber)">
        Þú ert fambi.
    </p>
    <p class="fambiForRound" data-bind="visible: (gameRoomState() == 'Active') && (round().fambi != slotNumber)">
        <span data-bind="text: getFambiName()"></span> er fambi.
    </p>
    <ul id="ffYAxis" data-bind="ffYAxis: targetScore()">
    </ul>
    <ul id="ffXAxis" data-bind="ffXAxis: players()">
    </ul>
    <div id="ffbars" data-bind="ffBars: players()">
    </div>
    <div class="ffOverlay" data-bind="visible: gameRoomState() == 'Waiting'">
        <div class="ffOlBackground"></div>
        <div class="ffOlContents" data-bind="visible: gameRoomState() == 'Waiting'">
            <br />
            <h3>Stillingar</h3> 
            <label for="target">Stig til að vinna:</label>
            <input type="text" name="target" data-bind="value: target, event: { blur: updateSettings }" />
            (1-24)
        </div>
    </div>

    <!-- This section is for players on explaining. -->
    <div class="ffOverlay" data-bind="visible: (gameRoomState() == 'Active') && (round().state == 'Explaining') && (round().fambi != slotNumber)">
        <div class="ffOlBackground">
        </div>
        <div class="ffOlContents" id="ffExplanation">
            <p>Orðið er:</p>
            <h3 data-bind="text: round().word"></h3>
            <label for="explanation">Þín skýring</label>
            <textarea id="explanation" cols="30" rows="3"></textarea>
            <button id="submitExplanation" data-bind="click: submitExplanation, visible: (explanations()[slotNumber].explanation == '')">Senda skýringu.</button>
            <p id="waitExplanation" data-bind="visible: (explanations()[slotNumber].explanation != '')">Bíðum eftir öðrum spilurum.</p>
        </div>
    </div>
    <!-- This section is for players on guessing. -->
    <div class="ffOverlay" data-bind="visible: (gameRoomState() == 'Active') && (round().state == 'Guessing') && (round().fambi != slotNumber)">
        <div class="ffOlBackground"></div>
        <div class="ffOlContents" id="ffExplanation">
            <p>Orðið er:</p>
            <h3 data-bind="text: round().word"></h3>
            <div class="explanationsDisplay">
                <p>Tillögur (Smelltu til að velja):</p>
                <ul data-bind="foreach: explanationsDisplay()">
                    <li data-bind="css: { selected: sel }"><span data-bind="click: $root.selectGuess, text: exp"></span></li>
                </ul>
            </div>
            <div class="guesses">
                <p>Ágiskanir annarra leikmanna:</p>
                <ul data-bind="foreach: players()">
                    <li data-bind="visible: (slotNumber != $root.round().fambi)">
                        <span data-bind="text: userName"></span>
                        <span data-bind="text: $root.getExpText(_.findWhere($root.explanationsDisplay(), { 'pos': $root.guesses()[slotNumber] }))"></span>
                    </li>
                </ul>
            </div>
            <button id="submitGuess" data-bind="click: submitGuess, visible: nextToAct() == slotNumber">Senda ágiskun</button>
        </div>
    </div>
    <!-- This section is for players on score review. -->
    <button data-bind="visible: (gameRoomState() == 'Active') && (round().state == 'Scoring'), click: nextRound">Næsta umferð</button>

    <!-- Show button to start round to fambi. -->
    <button data-bind="visible: (gameRoomState() == 'Active') && (round().state == 'Starting') && (round().fambi == slotNumber), click: startRound">Byrja umferð</button>

    <!-- This section is for fambi. -->
    <div class="ffOverlay" data-bind="visible: (gameRoomState() == 'Active') && (round().state == 'Explaining' || round().state == 'Guessing') && (round().fambi == slotNumber)">
        <div class="ffOlBackground"></div>
        <div class="ffOlContents">
            <p>Orðið er:</p>
            <h3><span data-bind="text: round().word"></span> = <span data-bind="text: round().explanation"></span></h3>
            <table class="ffFambiTable">
                <thead>
                    <tr><td>Leikmaður:</td><td>Skýring:</td><td>Rétt</td><td>Gisk</td></tr>
                </thead>
                <tbody data-bind="foreach: players()">
                    <tr data-bind="visible: (userProfileID != $root.currentUserID)">
                        <td class="playerName" data-bind="text: userName"></td>
                        <td class="playerExplanation" data-bind="text: $root.explanations()[slotNumber].explanation"></td>
                        <td><input type="checkbox" data-bind="checked: $root.explanations()[slotNumber].correct, click: $root.setCorrect" /></td>
                        <td data-bind="text: $root.getExpText(_.findWhere($root.explanationsDisplay(),{ 'pos': $root.guesses()[slotNumber]}))"></td>
                    </tr>
                </tbody>
            </table>
            <button id="startGuessing" data-bind="click: startGuessing, visible: (allExplained()) && (round().state == 'Explaining') && (!allCorrect())">Byrja ágiskanir</button>
            <button id="allCorrect" data-bind="click: finishRound, visible: allCorrect()">Allar skýringar réttar</button>
        </div>
    </div>

    <!-- This section is for end game results. -->
    <div style="position:relative;" data-bind="visible: (gameRoomState() == 'Finished')"> 
        <h3>Leik lokið</h3>
        <p>Lokastaða:</p>
            <ul class="guesses" data-bind="foreach: players()">
                <li>
                    <span data-bind="text: userName"></span>:
                    <span data-bind="text: $root.playerScores()[slotNumber]"></span>
                </li>
            </ul>
    </div>
</div>